CSS (Cascading Style Sheets) হল ওয়েব পেজ ডিজাইন এবং লেআউট ম্যানেজ করার জন্য ব্যবহৃত একটি শক্তিশালী ভাষা। CSS দিয়ে HTML বা XML ডকুমেন্টের উপস্থাপনা নিয়ন্ত্রণ করা হয়, যেমন টেক্সটের রঙ, ফন্ট, মার্জিন, প্যাডিং, বর্ডার, গ্রিড লেআউট ইত্যাদি। CSS-এ অনেক প্রোপার্টি, সিলেক্টর, অপারেটর এবং কৌশল রয়েছে যেগুলির সাহায্যে আপনি ওয়েব পেজের উপস্থাপনকে সুন্দর এবং কার্যকরী করতে পারেন।

এই টিউটোরিয়ালে, আমরা CSS রেফারেন্স নিয়ে আলোচনা করবো, যেখানে CSS এর মূল প্রোপার্টি, সিলেক্টর, এবং কৌশল সম্পর্কে বিস্তারিত ব্যাখ্যা দেওয়া হবে।

1. CSS প্রোপার্টি (CSS Properties)

CSS প্রোপার্টি হলো সেই নির্দেশনা যা একটি HTML উপাদান বা এলিমেন্টে স্টাইল প্রয়োগ করে। নিচে কিছু জনপ্রিয় CSS প্রোপার্টির উদাহরণ দেওয়া হলো।

1.1 ফন্ট সাইজ ও স্টাইল

• font-size: টেক্সটের আকার নির্ধারণ করে।
• font-family: ফন্ট ফ্যামিলি নির্ধারণ করে।
• font-weight: টেক্সটের মোটা বা পাতলা হওয়া নির্ধারণ করে।
• font-style: টেক্সটের স্টাইল (ইটালিক, স্বাভাবিক) নির্ধারণ করে।

h1 {
  font-size: 24px;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-style: italic;
}

1.2 টেক্সট সম্পর্কিত প্রোপার্টি

• color: টেক্সটের রঙ নির্ধারণ করে।
• text-align: টেক্সটের অবস্থান নির্ধারণ করে (যেমন সেন্টার, লেফট, রাইট)।
• line-height: লাইনের মধ্যে দূরত্ব নির্ধারণ করে।

p {
  color: #333;
  text-align: center;
  line-height: 1.5;
}

1.3 বর্ডার এবং প্যাডিং

• border: উপাদানের চারপাশে বর্ডার যোগ করে।
• padding: উপাদানের ভিতরের অংশে স্পেস (ফাঁকা জায়গা) যোগ করে।
• margin: উপাদানের বাইরের অংশে স্পেস যোগ করে।

div {
  border: 2px solid black;
  padding: 20px;
  margin: 15px;
}

1.4 ব্যাকগ্রাউন্ড প্রোপার্টি

• background-color: ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করে।
• background-image: ব্যাকগ্রাউন্ড হিসেবে একটি ছবি ব্যবহার করা হয়।
• background-size: ব্যাকগ্রাউন্ড ছবির আকার নির্ধারণ করে।

body {
  background-color: lightgray;
}

div {
  background-image: url('image.jpg');
  background-size: cover;
}

1.5 লেআউট এবং ডিসপ্লে

• display: উপাদানের ডিসপ্লে টাইপ নির্ধারণ করে (যেমন block, inline, flex, grid)।
• position: উপাদানের পজিশনিং (যেমন static, relative, absolute, fixed)।
• float: উপাদানকে অন্য উপাদানের পাশে ভাসমান অবস্থায় রাখে।

section {
  display: flex;
  position: relative;
  float: left;
}

2. CSS সিলেক্টর (CSS Selectors)

CSS সিলেক্টর ব্যবহার করে আপনি HTML উপাদান বা এলিমেন্টকে টার্গেট করতে পারেন এবং তাদের উপর স্টাইল প্রয়োগ করতে পারেন। নিচে কিছু সাধারণ সিলেক্টরের উদাহরণ দেওয়া হলো।

2.1 ক্লাস সিলেক্টর

ক্লাস সিলেক্টর . চিহ্ন দিয়ে শুরু হয় এবং যেকোনো HTML উপাদানের ক্লাসকে লক্ষ্য করে।

.button {
  background-color: blue;
  color: white;
}

2.2 আইডি সিলেক্টর

আইডি সিলেক্টর # চিহ্ন দিয়ে শুরু হয় এবং নির্দিষ্ট আইডি এর উপাদানটিকে লক্ষ্য করে।

#header {
  font-size: 30px;
  text-align: center;
}

2.3 টাইপ সিলেক্টর

টাইপ সিলেক্টর HTML ট্যাগের নাম দিয়ে কাজ করে।

h2 {
  color: green;
}

2.4 পাদচিহ্ন সিলেক্টর

এই সিলেক্টরটি পেজের নির্দিষ্ট অবস্থান অনুযায়ী একটি উপাদান নির্বাচন করে।

ul > li {
  list-style-type: square;
}

3. CSS লেআউট প্রোপার্টি (CSS Layout Properties)

CSS এর লেআউট সম্পর্কিত কিছু গুরুত্বপূর্ণ প্রোপার্টি রয়েছে যা ওয়েব ডিজাইনের ক্ষেত্রে খুবই গুরুত্বপূর্ণ।

3.1 Flexbox

Flexbox একটি আধুনিক লেআউট মডেল যা উপাদানগুলিকে একটি লাইন বা কলামে সন্নিবেশিত এবং সাজানোর জন্য ব্যবহৃত হয়।

.container {
  display: flex;
  justify-content: space-between;  /* উপাদানগুলির মধ্যে সমান দূরত্ব */
  align-items: center;  /* উপাদানগুলিকে অনুভূমিকভাবে সেন্টার করা */
}

3.2 Grid

CSS Grid Layout একটি শক্তিশালী লেআউট সিস্টেম যা ২D গ্রিডের মাধ্যমে উপাদান সাজানোর জন্য ব্যবহৃত হয়।

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* ৩টি কলাম তৈরি করা */
  gap: 10px;  /* কলামের মধ্যে গ্যাপ */
}

4. CSS এনিমেশন (CSS Animations)

CSS এনিমেশন ব্যবহার করে আপনি উপাদানগুলিতে মসৃণ গতির প্রভাব তৈরি করতে পারেন।

উদাহরণ: একটি টেক্সট এনিমেশন

@keyframes move {
  0% { left: 0; }
  100% { left: 100px; }
}

.box {
  position: relative;
  animation: move 2s infinite;
}

ব্যাখ্যা:

• @keyframes ব্যবহার করে এনিমেশন তৈরি করা হয়েছে।
• animation প্রোপার্টির মাধ্যমে এনিমেশনটিকে সময় নির্ধারণ করা হয়েছে এবং এটি infinite পর্যন্ত চলতে থাকবে।

5. CSS মিডিয়া কুয়েরি (CSS Media Queries)

Media Queries ব্যবহার করে আপনি বিভিন্ন স্ক্রীন সাইজ এবং ডিভাইসের জন্য আলাদা স্টাইল নির্ধারণ করতে পারেন।

উদাহরণ: রেসপন্সিভ ডিজাইন

@media (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

ব্যাখ্যা:

• @media এর মাধ্যমে নির্দিষ্ট ব্রাউজার বা স্ক্রীন সাইজের জন্য স্টাইল প্রয়োগ করা হয়।

6. CSS Transitions

CSS Transitions ব্যবহার করে আপনি কোনো উপাদানের স্টাইল পরিবর্তন হলে তা মসৃণভাবে এবং ধীরে ধীরে পরিবর্তন করতে পারেন।

উদাহরণ: Hover Effect with Transition

button {
  background-color: lightblue;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: darkblue;
}

ব্যাখ্যা:

• transition প্রোপার্টি ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে, যা হোভার ইফেক্টের সাথে ধীরে ধীরে ঘটে।

সারাংশ

CSS হল ওয়েব ডিজাইন এবং ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। CSS এর মাধ্যমে আপনি ওয়েব পেজের স্টাইল এবং লেআউটকে সুন্দরভাবে নিয়ন্ত্রণ করতে পারেন। আমরা এখানে কিছু মূল CSS প্রোপার্টি, সিলেক্টর এবং কৌশল আলোচনা করেছি যা আপনাকে CSS এর মূল ধারণা এবং তার ব্যবহার বুঝতে সাহায্য করবে।

এছাড়া, CSS Grid, Flexbox, Media Queries, Transitions, Animations, এবং Hover Effects এর মতো শক্তিশালী কৌশলগুলি ব্যবহার করে আপনি আধুনিক এবং রেসপন্সিভ ওয়েব ডিজাইন তৈরি করতে পারবেন।